<template>
  <plain-page
    v-infinite-scroll="load"
  >
    <div
      style="
        overflow:auto;display: flex;
        flex-wrap: wrap;
        justify-content: center;"
    >
      <el-card
        v-for="resthome in resthomePage.rows"
        :key="resthome.id"
        class="resthome"
      >
        <div slot="header" style="color:#303133;font-size: 16px;">
          {{resthome.name}}
        </div>
        <div class="stat">
          <div class="item">总床位数：<span class="number">{{resthome.berthCount}}</span></div>
          <div class="item">已入住数：<span class="number" style="color:#F56C6C">{{resthome.usedBerthCount}}</span></div>
          <div class="item">空床位数：<span class="number" style="color:#67C23A">{{resthome.emptyBerthCount}}</span></div>
        </div>
        <div class="operations">
          <!--<el-button type="primary" plain @click="onCheckinClick(resthome)">入住管理</el-button>-->
          <el-button type="default" @click="onCheckinRecordClick(resthome)">入住记录</el-button>
          <el-button type="default" @click="onBerthSettingClick(resthome)">床位设置</el-button>
          <!--<el-button type="default" @click="onBerthTypeSettingClick(resthome)">床位类型管理</el-button>-->
          <el-button type="default" @click="onChargeSettingClick(resthome)">费用类别设置</el-button>
        </div>
      </el-card>
    </div>
    <el-alert
      v-if="loading"
      class="load-info"
      title="加载中..."
      type="info"
      center
      :closable="false"
    />
  </plain-page>
</template>

<script>
export default {
  pageProps: {
    title: '养老机构'
  },
  data() {
    return {
      resthomePage: {
        rows: [],
        total: 0
      },
      loading: false,
      noMore: false,
      // 分页相关
      pageSize: 20,
      currentPage: 1
    };
  },
  mounted() {
    this.load(() => {
      if (this.resthomePage.total == 0) {
        this.$message.info('无养老院数据');
      }
    });
  },
  methods: {
    onCheckinClick(resthome) {
      if (resthome.berthCount == 0) {
        this.$alert('无床位数据');
        return;
      }
      this.pushPage({
        path: '/resthome/checkin',
        params: { resthome },
        subTitle: resthome.name,
        key: resthome.id
      });
    },
    onCheckinRecordClick(resthome) {
      this.pushPage({
        key: resthome.id,
        path: '/resthome/checkin/record/checkin-record',
        params: {
          resthomeId: resthome.id
        },
        subTitle: resthome.name
      });
    },
    onBerthSettingClick(resthome) {
      this.openTab({
        url: 'view/community/berth/berthSetting/index.do?_func_id=397&resthome_id=' + resthome.id,
        title: resthome.name + ' - 床位设置'
      });
    },
    onBerthTypeSettingClick(resthome) {
      this.openTab({
        url: 'view/community/berth/berthType/index.do?_func_id=400&resthome_id=' + resthome.id,
        title: resthome.name + ' - 床位类型设置'
      });
    },
    onChargeSettingClick(resthome) {
      this.pushPage({
        key: resthome.id,
        path: '/resthome/chargeType',
        params: {resthomeId: resthome.id},
        subTitle: resthome.name
      });
    },
    async load(onDone) {
      if (this.noMore || this.loading) {
        return;
      }
      this.loading = true;
      let page = await this.$http.get('/api/resthome',
        {params: { rows: this.pageSize, page: this.currentPage }});
      this.resthomePage = {total: page.total, rows: this.resthomePage.rows.concat(page.rows)};
      this.noMore = page.rows == 0;
      if (this.noMore && this.currentPage > 2) {
        this.$message.info('没有更多了');
      }
      this.currentPage++;
      this.loading = false;
      onDone && onDone();
    }
  }
}
</script>

<style scoped>
.resthome {
  width: 410px;
  height: 160px;
  margin: 8px 8px;
  float: left;
}

.stat {
  color: #909399;
  margin-bottom: 16px;
  font-size: 14px;
}
.stat > .item {
  display: inline;
  padding-right: 24px;
}
.stat > .item > .number {
  font-weight: bold;
  color: #303133;
  font-size: 16px;
}
.operations > .el-button {
  margin-left: 0px;
}

.load-info {
  clear: both;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}
</style>
